<template>
    <div>
        <el-row>
            <el-col :span="8" style="padding-right:10px">
                <el-card class="box-card" shadow="hover">
                    <div slot="header" class="user">
                        <img src="../assets/user.png">
                        <div class='user-info'>
                            <p class="user-name">user</p>
                            <p class="user-title">access</p>
                        </div>
                    </div>
                    <div class="login-info">
                        <p>上次登录时间：<span>2022-1-1</span></p>
                        <p>上次登录地点：<span>广州</span></p>
                    </div>
                </el-card>
                <el-card style="margin-top:20px; height:460px">
                      <template>
                        <el-table
                        :data="tableData"
                        style="width: 100%">
                        <el-table-column v-for="(value,key) in tableLabel" :key='key' :prop="key" :label="value"/>
                        
                        </el-table>
                    </template>
                </el-card>
            </el-col>
            <el-col :span="16" style="padding-left:10px">
                <!-- 右侧上方 -->
                <div class="num">
                    <el-card v-for="data in countData" :key="data.name" :body-style="{display:'flex' ,padding:0}">
                        <i class="icon" :class="`el-icon-${data.icon}`" :style="{background:data.color}"></i>
                        <div class="detail">
                            <p class="price">￥{{data.value}}</p>
                            <p class="desc">{{data.name}}</p>
                        </div>
                    </el-card>
                </div>
                <!-- 右侧中：折线图 -->
                <el-card style="height:280px">
                    <div ref='echarts1' style="width:100%; height:280px">
                    </div>
                </el-card>
                <!-- 右下： -->
                <div class="graph" style="height:260px">
                    <el-card>
                        <div ref="echarts2" style="height:260px"></div>
                    </el-card>
                    <el-card>
                        <div ref="echarts3" style="height:240px"></div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getData } from "../api";
import * as echarts from 'echarts'

export default {
    name:'HomeModel',
    data() {
        return {
            tableData: [],
            tableLabel:{
                name:"品牌",
                todayBuy:"今日购买",
                monthBuy:"月购买",
                totalBuy:"总购买",
            },
            countData: [
                {
                name: "今日支付订单",
                value: 1234,
                icon: "success",
                color: "#2ec7c9",
                },
                {
                name: "今日收藏订单",
                value: 210,
                icon: "star-on",
                color: "#ffb980",
                },
                {
                name: "今日未支付订单",
                value: 1234,
                icon: "s-goods",
                color: "#5ab1ef",
                },
                {
                name: "本月支付订单",
                value: 1234,
                icon: "success",
                color: "#2ec7c9",
                },
                {
                name: "本月收藏订单",
                value: 210,
                icon: "star-on",
                color: "#ffb980",
                },
                {
                name: "本月未支付订单",
                value: 1234,
                icon: "s-goods",
                color: "#5ab1ef",
                },
            ],

        }
    },
    mounted() {
        getData().then(({data})=>{
            const {tableData, orderData, userData, videoData} = data.data
            this.tableData = tableData
            // console.log('http res,', tableData, orderData, userData)

            // echarts设置
            var myChart = echarts.init(this.$refs.echarts1);
            // 数据
            var echarts1Option = {}
            // x
            // const { orderData } = data.data
            const xAxis = Object.keys(orderData.data[0])
            const xAxisData = {
                data:xAxis
            }
            echarts1Option.xAxis = xAxisData
            echarts1Option.yAxis = {}
            echarts1Option.legend = xAxisData
            echarts1Option.series = []
            xAxis.forEach((key)=>{
                echarts1Option.series.push(
                    {
                        name:key,
                        data:orderData.data.map(item=>item[key]),
                        type:'line'
                    }
                )
            })
            console.log(echarts1Option.series)
            // 绘制图表
            myChart.setOption(echarts1Option)

            
            var myChart2 = echarts.init(this.$refs.echarts2);
            // 数据
            var echarts2Option = {
                legend: {
                    // 图例文字颜色
                    textStyle: {
                    color: "#333",
                    },
                },
                grid: {
                    left: "20%",
                },
                // 提示框
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    type: "category", // 类目轴
                    data: userData.map(item=>item.date),
                    axisLine: {
                    lineStyle: {
                        color: "#17b3a3",
                    },
                    },
                    axisLabel: {
                    interval: 0,
                    color: "#333",
                    },
                },
                yAxis: [
                    {
                    type: "value",
                    axisLine: {
                        lineStyle: {
                        color: "#17b3a3",
                        },
                    },
                    },
                ],
                color: ["#2ec7c9", "#b6a2de"],
                series: [
                    {
                        name:'新增用户',
                        data:userData.map(item=>item.new),
                        type:'bar'
                    },
                    {
                        name:'活跃用户',
                        data:userData.map(item=>item.active),
                        type:'bar'
                    }
                ],
                }
                myChart2.setOption(echarts2Option)

                var myChart3 = echarts.init(this.$refs.echarts3);
                // 数据
                var echarts3Option = {
                        tooltip: {
                            trigger: "item",
                        },
                        color: [
                            "#0f78f4",
                            "#dd536b",
                            "#9462e5",
                            "#a6a6a6",
                            "#e1bb22",
                            "#39c362",
                            "#3ed1cf",
                        ],
                        series: [{
                            data:videoData,
                            type:'pie'
                        }],
                    }
                myChart3.setOption(echarts3Option)

            })
        

        
    },
}
</script>

<style lang="less" scoped>
.user{
    display: flex;
    // flex可以用align-items设置居中
    align-items: center;
    img{
        margin-right: 40px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
    }
    .user-info{
        .user-name{
            font-size: 32px;
            margin-bottom: 10px;
        }
        .user-title{
            color: grey;
        }
    }
}

.login-info{
    p{
        font-size: 14px;
        line-height: 28px;
        color: #999999;
        span{
            color: #999999;
            margin-left: 60px;
        }
    }
}
.icon{
    width: 80px;
    height: 80px;
    font-size: 30px;
    text-align: center;
    line-height: 80px;
    color:#fff
}
.num{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .detail{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 15px;
        .price{
            font-size: 30px;
            margin-bottom: 10px;
            line-height: 30px;
            height: 30px;
        }
        .desc{
            font-size: 14px;
            color: #999;
            text-align: center;
        }
    }
    .el-card{
        width: 32%;
        margin-bottom: 20px;
    }
}
.graph{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .el-card{
        // height: 280px;
        width: 48%;
    }
}

</style>